<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>bootsrap案例</title>
    <link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/index.css">
    <script src="./jquery/jquery.min.js"></script>
    <script src="./bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
    <header class="xlw-nav navbar-fixed-top">
        <nav class="navbar navbar-default container">
            <div class="container-fluid">
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <div class="logoBox">
                        <a class="navbar-brand" href="#"><img alt="Brand" src="./images/logo.png"><p>Mr. Habit</p></a>
                    </div>
                </div>

                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav navbar-right navRight">
                        <li>HOME</li>
                        <li>FEATURES</li>
                        <li>SCREENSHOTS</li>
                        <li>DOWNLOAD</li>
                        <li>SUBSCRIBE</li>
                        <li>CONTACTS</li>
                        <li class="dropdown">
                            <button type="button" class="dropdown-toggle navBtn glyphicon glyphicon-menu-hamburger" aria-hidden="true"
                                    data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            </button>
                            <ul class="dropdown-menu ddmenu">
                                <li><a href="#"></a></li>
                                <li><a href="#"></a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </header>

    <main class="main">
        <div class="container">
            <div class="row">
                <div class="main-left col-lg-6 col-xs-12">
                    <h1 class="main-title">Mr. Habit - Habit Tracker & Schedule</h1>
                    <p class="main-con">Innovative assistant for forming habits at a time convenient for you. Many
                        functions and flexibility of settings will satisfy any of your requirements, and a new
                        system of analysis and motivation (Adaptation and Streak ("Don't break the chain"))
                        will help to track progress in achieving your goals</p>
                    <a class="main-download"><span class="glyphicon glyphicon-download-alt"></span>Download for Free</a>
                </div>
<!--                轮播-->
                <div class="main-lunbo col-lg-4 col-xs-12">
                    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
                        <!-- Indicators -->
                        <ol class="carousel-indicators">
                            <li data-target="#carousel-example-generic" data-slide-to="0"></li>
                            <li data-target="#carousel-example-generic" data-slide-to="1" class="active"></li>
                            <li data-target="#carousel-example-generic" data-slide-to="2"></li>
                        </ol>

                        <!-- Wrapper for slides -->
                        <div class="carousel-inner" role="listbox">
                            <div class="item">
                                <img src="./images/lunbo1.png" alt="">
                            </div>
                            <div class="item active">
                                <img src="./images/lunbo2.png" alt="">
                            </div>
                            <div class="item">
                                <img src="./images/lunbo3.png" alt="">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <section>
<!--        三个tips-->
        <div class="mobile-tip">
            <div class="container">
                <div class="row">
                    <div class="tip-box col-lg-4">
                        <span class="tip-img glyphicon glyphicon-time" aria-hidden="true"></span>
                        <p class="tip-con">Adaptability</p>
                        <p class="tip-txt">Set up time intervals and the app will adapt to them, offering to do habits that are relevant at the current moment</p>
                    </div>

                    <div class="tip-box col-lg-4">
                        <span class="tip-img glyphicon glyphicon-star" aria-hidden="true"></span>
                        <p class="tip-con">Motivation</p>
                        <p class="tip-txt">2 motivation techniques: Adaptation and Streak ("Don't break the chain")</p>
                    </div>

                    <div class="tip-box col-lg-4">
                        <span class="tip-img glyphicon glyphicon-object-align-bottom" aria-hidden="true"></span>
                        <p class="tip-con">Analysis</p>
                        <p class="tip-txt">Weekly reports and analysis, detailed statistics for habits</p>
                    </div>
                </div>
            </div>
        </div>

        <!--        FEATURES-->
        <div class="features">
            <!--        版心-->
            <div class="container">
                <div class="row">
                    <div class="features-title col-lg-12">
                        FEATURES
                    </div>
                    <!--        左边按钮-->
                    <div class="list-group features-btn-box col-lg-4 col-md-12 col-sm-12 col-xs-12">
                        <button type="button" class="list-group-item features-btn btn-l addfbtn">
                            <div class="mybtn-left col-lg-9 col-md-10 col-sm-10 col-xs-10">
                                <h2>Covers</h2>
                                <p>Decorate the application with your favourite photos</p>
                            </div>
                            <div class="btn-left-span col-lg-3 col-md-2 col-sm-2 col-xs-2">
                                <span class="glyphicon glyphicon-picture"></span>
                            </div>
                        </button>
                        <button type="button" class="list-group-item features-btn btn-l">
                            <div class="mybtn-left col-lg-9 col-md-10 col-sm-10 col-xs-10">
                                <h2>Habit Groups</h2>
                                <p>You can group your habits and create time intervals for them</p>
                            </div>
                            <div class="btn-left-span col-lg-3 col-md-2 col-sm-2 col-xs-2">
                                <span class="glyphicon glyphicon-tags"></span>
                            </div>
                        </button>
                        <button type="button" class="list-group-item features-btn btn-l">
                            <div class="mybtn-left col-lg-9 col-md-10 col-sm-10 col-xs-10">
                                <h2>Privacy & Backups</h2>
                                <p>Set up Passcode and Touch ID / Face ID to protect your data. Use iCloud and Dropbox for backups</p>
                            </div>
                            <div class="btn-left-span col-lg-3 col-md-2 col-sm-2 col-xs-2">
                                <span class="glyphicon glyphicon-unchecked"></span>
                            </div>
                        </button>
                    </div>
                    <!--       features图片-->
                    <div class="change-box col-lg-4 col-md-12 col-sm-12 col-xs-12">
                        <ul class="list-group">
                            <li class="list-group-item addchange"><img src="./images/4.png" alt=""></li>
                            <li class="list-group-item"><img src="./images/5.png" alt=""></li>
                            <li class="list-group-item"><img src="./images/6.png" alt=""></li>
                            <li class="list-group-item"><img src="./images/7.png" alt=""></li>
                            <li class="list-group-item"><img src="./images/8.png" alt=""></li>
                            <li class="list-group-item"><img src="./images/9.png" alt=""></li>
                            <li class="list-group-item"><img src="./images/4.png" alt=""></li>
                        </ul>
                    </div>

                    <!--        右边按钮-->
                    <div class="list-group features-btn-box col-lg-4 col-md-12 col-sm-12 col-xs-12">
                        <button type="button" class="list-group-item features-btn btn-r">
                            <div class="btn-left-span col-lg-3 col-md-2 col-sm-2 col-xs-2">
                                <span class="glyphicon glyphicon-star-empty"></span>
                            </div>
                            <div class="mybtn-right col-lg-9 col-md-10 col-sm-10 col-xs-10">
                                <h2>Adaptation & Streak ("Don't break the chain")</h2>
                                <p>Choose what motivation technique is more comfortable to you</p>
                            </div>
                        </button>
                        <button type="button" class="list-group-item features-btn btn-r">
                            <div class="btn-left-span col-lg-3 col-md-2 col-sm-2 col-xs-2">
                                <span class="glyphicon glyphicon-pencil"></span>
                            </div>
                            <div class="mybtn-right col-lg-9 col-md-10 col-sm-10 col-xs-10">
                                <h2>Flexibility</h2>
                                <p>Detailed habits settings, individual schedule, custom schedule intervals, notification settings, etc.</p>
                            </div>
                        </button>
                        <button type="button" class="list-group-item features-btn btn-r">
                            <div class="btn-left-span col-lg-3 col-md-2 col-sm-2 col-xs-2">
                                <span class="glyphicon glyphicon-stats"></span>
                            </div>
                            <div class="mybtn-right col-lg-9 col-md-10 col-sm-10 col-xs-10">
                                <h2>Weekly Reports & Statistics</h2>
                                <p>Recommendations and report for the week, as well as the full amount of information of your habits</p>
                            </div>
                        </button>
                    </div>
                </div>
            </div>

        </div>

        <!--screenshot部分-->
        <div class="screenshot">
            <div class="container">
                <div class="row">
                    <div class="screenshot-title col-lg-12">
                        SCREENSHORTS
                    </div>
                <!--    轮播图-->
                    <div id="screenshot-carousel" class="carousel slide col-lg-12" data-ride="carousel">

                        <!-- Wrapper for slides -->
                        <div class="carousel-inner" role="listbox">
                            <div class="item my-item active">
                                <img src="./images/4.png" alt=" ">
                            </div>
                            <div class="item my-item">
                                <img src="./images/5.png" alt=" ">
                            </div>
                            <div class="item my-item">
                                <img src="./images/6.png" alt=" ">
                            </div>
                            <div class="item my-item">
                                <img src="./images/7.png" alt=" ">
                            </div>
                            <div class="item my-item">
                                <img src="./images/8.png" alt=" ">
                            </div>
                            <div class="item my-item">
                                <img src="./images/9.png" alt=" ">
                            </div>

                        </div>

                        <!-- Controls -->
                        <a class="left carousel-control" href="#screenshot-carousel" role="button" data-slide="prev">
                            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                            <span class="sr-only">Previous</span>
                        </a>
                        <a class="right carousel-control" href="#screenshot-carousel" role="button" data-slide="next">
                            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                            <span class="sr-only">Next</span>
                        </a>
                    </div>

                </div>
            </div>
        </div>

        <!--download-->
        <div class="download">
            <div class="container">
                <div class="row">
                    <div class="download-title col-lg-12">
                        DOWNLOAD
                    </div>
                    <div class="col-lg-8 col-md-6 col-sm-8 row download-btn">
                        <div class="btn-free col-lg-4">
                            <a class="btn" href="#" role="button">
                                <span class="glyphicon glyphicon-phone" aria-hidden="true"></span>
                                <p>
                                    <i>Free on</i>
                                    <b>Apple Store</b>
                                </p>
                            </a>
                        </div>
                        <div class="btn-pro col-lg-4">
                            <a class="btn" href="#" role="button">
                                <span class="glyphicon glyphicon-phone" aria-hidden="true"></span>
                                <p>
                                    <i>Pro on</i>
                                    <b>Apple Store</b>
                                </p>
                            </a>
                        </div>
                    </div>

                    <div class="download-img col-lg-4">
                        <img src="./images/6.png" alt="">
                    </div>
                </div>
            </div>
        </div>

        <!--NEWSLETTER-->
        <div class="newsletter">
            <div class="container">
                <div class="row">
                    <div class="newsletter-title col-lg-5">NEWSLETTER</div>
                    <div class="input-group col-lg-6">
                        <input type="text" class="form-control" placeholder="Email">
                        <span class="input-group-btn">
                            <button class="btn btn-go glyphicon glyphicon-send" type="button" aria-hidden="true"></button>
                        </span>
                    </div>
                </div>
            </div>
        </div>

        <!--CONTACTS-->
        <div class="contacts">
            <div class="container">
                <div class="row">
                    <div class="contacts-title col-xs-12 col-sm-12">CONTACTS</div>
                <!--表单-->
                    <form class="sendform col-lg-8 col-sm-8 col-xs-8">
                        <div class="form-group">
                            <label for="exampleInputEmail1">Email*</label>
                            <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
                        </div>
                        <div class="form-group">
                            <label for="exampleInputsubjects">subjects*</label>
                            <input type="password" class="form-control" id="exampleInputsubjects" placeholder="subjects">
                        </div>
                        <div class="form-group">
                            <label for="exampleInputmessage">message*</label>
                            <input type="password" class="form-control" id="exampleInputmessage" placeholder="message">
                        </div>
                        <button type="submit" class="btn btn-default btn-send col-sm-5 col-xs-5">Send</button>
                    </form>
                </div>
            </div>
        </div>


    </section>


    <script src="./js/index.js"></script>
</body>
</html>